<template>
	<view class="main pa">
		<image class="bg" :src="bg"></image>
		<view class="content pa">
			<dropdown-menu  :top="top" @selectOption="selectOption"></dropdown-menu>
			<!-- 商品列表 -->
			<view class="goods" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)" v-if="goods.length">
				<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
				<!-- 最外层 -->
				<view class="goods-info x-f pr" v-for="(good, index) in goods" :key="index">
					<view class="goods_label pa" v-if="good.is_group">拼团</view>
					<!-- 图片 -->
					<view class="goods-img">
						<image class="goods-img" :src="good.list_pic_url"></image>
					</view>
					<!-- 文字内容 -->
					<view class="info">
						<view class="title">{{good.spu_name}}</view>
						<view class="num tc">已兑{{good.sale_num}}件</view>
						<view class="score-btn x-bc">
							<view class="score">{{good.points}}积分</view>
							<view class="btn pa" @tap.stop="jump(good)">去开团</view>
						</view>
					</view>
				</view>
				<view class="getMore" style="padding: 50rpx 0;" v-if="goods.length > 5">
					<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
				</view>
			</view>
		</view>
		<empty :null_data="null_data" v-if="!goods.length"></empty>
		<!-- 返回顶部 -->
		<backtop :show_top="show_top"></backtop>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		data() {
			return {
				null_data: {									// 空状态
					null_img: this.imgUrl + 'nocollect.png',	
					text: '暂无商品~'
				},
				bg: '/static/image/group-bg.png',				// 背景
                groupUrl: '/pages/goods/detail/index',			// 商品详情
				current: 0,										// 下标
				data: null,										// 对象
				obj: {											// 请求提交参数
					page: 1,
					pagesize: 10,
					category_id: '',
					orderby_type: 'number',
					orderby: 'desc',
					lat: '24.881627',
					lng: '118.628881',
					is_group: 1,
					member_id: 1
				},
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
				goods: [],
				isName: false,
				isLoad: false,
				isNone: false,
				hight: 0,
				show_top: false, // 回到顶部按钮显示
			}
		},
		computed: {
		    ...mapState({
		        tabs: state => state.goods.tabs_group   // 标签
		    })
		},
		watch: {
			// 监听滚动高度
			hight(newVal, oldVal) {
				if (newVal > 100) {
					this.show_top = true;
				} else {
					this.show_top = false;
				}
			}
		},
		onReachBottom() {
			// 触底加载
			this.getMore();
		},
        methods: {
			// 当页面滚动时触发;
			onPageScroll(res) {
			    // 获取当前页面滚动高度；
				this.hight = res.scrollTop;
			},
			getApi() {
				this.$api('giftpage', this.obj).then(res => {
					this.totalPages = res.data.totalPages
					this.goods = res.data.data
				})
			},
			// 加载更多
			getMore() {
				if(this.isName) return;
				this.isNone =true;
				this.isLoad = true;
				setTimeout(()=> {
					this.obj.page++
					this.$api('giftpage',this.obj).then( res => {
						let arr = [...this.goods,...res.data.data]
						this.goods = arr
						if(!res.data.data.length) {
							this.isLoad = false;
							this.isName =true
						} else {
							this.isLoad = false;
							this.isNone = false;
						}
					})
				},1000)
			},
			// 下拉刷新
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			// 下拉刷新
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.getMore();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			// 下拉菜单
			selectOption(index,active) {
				if(index == 0) {
					if(active == 1) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if(active == 2) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'asc'
						this.getApi();
					}
				}
				if(index == 1) {
					if(active == 0) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if(active == 1) {
						this.obj.orderby_type = 'number'
						this.obj.orderby = 'desc'
						this.getApi();
					}
				}
				if(index == 2) {
					if(active == 0) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'asc'
						this.getApi();
					}
					if(active == 1) {
						this.obj.orderby_type = 'distance'
						this.obj.orderby = 'desc'
						this.getApi();
					}
				}
			},
			// 跳转商品详情
            jump(good) {
				let obj = {
					"spu_id": good.spu_id,
					"sku_id": good.sku_id,
				}
				this.$api('giftinfo',obj).then(res => {
					let arr  = res
					let goods = arr.data;
				    this.$store.dispatch('goods/get_goodsInfo',goods)
				})
                this.$Router.push({
                    path: this.groupUrl
                })
            },
			// tabs 切换
			change(index) {
			    let arr = [];
			    this.data = this.goods;
			    this.current = index;
			    for (let i in this.data) {
			        if (this.tabs[index].name ==  this.data[i].type) {
			            arr.push(this.data[i]);
			        }
			        if (index == 0) {
			            arr = this.data;
			        }
			    }
			    this.data = arr;
			}
        },
		onLoad() {
			this.getApi();
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss';
	.goods-info:last-child{
	    border-bottom: none;
	}
</style>
